<template lang="html">
  <div class="topList" v-show="canShow">
    <div class="datePicker clearfix">
      <div class="date_wapper">
        <span class="demonstration">选择日期</span>
        <el-date-picker
          v-model="timevalue"
          type="date"
          size='mini'
          placeholder="选择日期"
          @change = "changeDate" value-format="yyyy-MM-dd"
          >
        </el-date-picker>
      </div>
    </div>
    <div class="container">
      <div class="item" v-for='(item,index) in listData'>
        <i class='topicon' :class="iconList[index]"></i>
        <div class="context">
          <p>{{item.name}}</p>
          <p class="num">{{item.value}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props : {
    listData :{
    	type :Array
    },
    iconList : {
      type : Array
    }
  },
  data(){
    return {
      timevalue : '',
      canShow:true,
    }
  },
  watch:{
  },
  methods:{
  	changeDate(val){
  		this.$emit('callBackTopList',val);//select事件触发后，自动触发showCityName事件
  	}
  },
  created (){
    this.timevalue = new Date(new Date()-86400000)._toDateString()
  }
}
</script>

<style lang="scss">
@import '../../assets/icon.scss';
  .topList {
    width: 100%;
    .datePicker {
      width: 100%;
      height: 30px;
      margin-bottom: 12px;
      .date_wapper{
        float: right;
        margin-right: 12px;
        .demonstration {
          margin-right: 8px;
        }
      }
    }
    .container {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      .item {
        width: 20%;
        height: 86px;
        border: 1px solid #ddd;
        margin-bottom: 20px;
        .context {
          display: flex;
          justify-content: center;
          flex-direction: column;
          float: right;
          width: 60%;
          height: 100%;
          p {
            margin-bottom: 6px;
          }
          p:first-child {
            font-size: 12px;
            color: #999;
          }
          p.num {
            font-size: 24px;
            font-weight: 700;
          }
        }
      }
    }
  }
</style>
